<style>
  #addDataSourceForm {
    padding: 10px;
    margin-right: 50px;
  }
</style>
<form id="addDataSourceForm" class="layui-form" action="" lay-filter="dataSourceAdd">
  <div class="layui-form-item">
    <label class="layui-form-label">别名</label>
    <div class="layui-input-block">
      <input type="text" name="alias" autocomplete="off" placeholder="请输入别名" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">数据库类型</label>
    <div class="layui-input-block">
      <select name="dbType">
        <option value="mysql">mysql</option>
      </select>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">数据库驱动</label>
    <div class="layui-input-block">
      <select name="dbDriver">
        <option value="com.mysql.cj.jdbc.Driver">com.mysql.cj.jdbc.Driver</option>
        <option value="com.mysql.jdbc.Driver">com.mysql.jdbc.Driver</option>
      </select>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">数据库地址</label>
    <div class="layui-input-block">
      <input type="text" name="dbUrl" autocomplete="off" lay-verify="required" placeholder="请输入链接地址，如：jdbc:mysql://localhost:3306/test"
        class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">数据库账户</label>
    <div class="layui-input-block">
      <input type="text" name="dbUserName" autocomplete="off" lay-verify="required" placeholder="请输入数据库账户"
        class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">数据库密码</label>
    <div class="layui-input-block">
      <input type="password" name="dbPassword" autocomplete="off" placeholder="请输入数据库密码" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="button" class="layui-btn layui-btn-normal" id="testConnect">测试连接
      </button>
      <button type="button" class="layui-btn layui-btn-info" id="reset">重置
      </button>
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="dataSourceAddSubmit">立即提交
      </button>
    </div>
  </div>
</form>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
  layui.use(['form', 'table', 'layer'], function () {
    var form = layui.form,
      layer = layui.layer,
      table = layui.table,
      $ = layui.$

    //自定义验证规则
    form.verify({
      dbUrl: function (value) {
        if (value.length) {
          return '数据库链接必填'
        }
      },
      dbUserName: function (value) {
        if (value.length) {
          return '数据库用户名必填'
        }
      }
    })

    //监听提交
    form.on('submit(dataSourceAddSubmit)', function (data) {
      $.ajaxSetup({
        contentType: 'application/json;charset=utf-8'
      });

      $.post('/code/db', JSON.stringify(data.field), function (response) {
        table.reload('dataSource', {})
        refreshDataSource()
        layer.closeAll('page')
        layer.msg(response.data, {
          time: 1000,
          icon: 1
        })
      }, 'json')
      return false
    })

    var defaultForm = {
      'alias': '',
      'dbDriver': 'com.mysql.cj.jdbc.Driver',
      'dbUrl': '',
      'dbUserName': '', //复选框选中状态
      'dbPassword': '', //开关状态
      'dbType': 'mysql'
    }

    form.val('dataSourceAdd', defaultForm)

    //测试连接
    layui.$('#addDataSourceForm #testConnect').on('click', function () {
      var data = form.val('dataSourceAdd');

      $.ajaxSetup({
        contentType: 'application/json;charset=utf-8'
      });

      $.post('/code/db/test', JSON.stringify(data), function (response) {
        layer.msg(response.data ? response.data : response.msg, {
          time: response.data ? 1000 : 10000,
          icon: response.data ? 1 : 2,
          closeBtn: 1
        })
      }, 'json')
    })

    //表单重置
    layui.$('#addDataSourceForm #reset').on('click', function () {
      form.val('dataSourceAdd', defaultForm)
    })
  })
</script>
